<template>
  <div class="app-container">

    <div class="filter-container">
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        border
      >
        <el-table-column
          v-for="col in columns"
          :key="col.id"
          :prop="col.id"
          :label="col.label"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { fetchStatistics } from "@/api/table";
export default {
  data() {
    return {
      tableData: [
        {
          taskName: "连续14日检测(2019:04-2019:06)"
        }
      ],
      tableLoading: false,
      columns: [
        {
          label: "任务名称",
          id: "taskName"
        },
        {
          label: "进行中",
          id: "ongoing"
        },
        {
          label: "待审核",
          id: "checkPending"
        },
        {
          label: "待领取",
          id: "canReceive"
        },
        {
          label: "已领取",
          id: "alreadyReceived"
        }
      ]
    };
  },
  mounted() {
    this.getStatistics();
  },
  methods: {
    async getStatistics() {
      this.tableLoading = true;
      const res = await fetchStatistics();
      this.tableData = [];
      this.tableLoading = false;
      res.data.forEach(item => {
        const data = {};
        data.taskName = item.taskName;
        data.canReceive = item.canReceive;
        data.ongoing = item.ongoing;
        data.soldOut = item.soldOut;
        data.taskId = item.taskId;
        data.alreadyReceived = item.alreadyReceived;
        data.checkPending = item.checkPending;
        this.tableData.push(data);
      });
    }
  }
};
</script>
